<template>
  <el-drawer
    :title="showTitle"
    :visible.sync="drawer"
    show-close
    size="50%"
    :before-close="dialogBeforeClose"
    :wrapper-closable="false"
  >
    <div class="container">
      <el-form ref="form" :model="formData" :rules="rules">
        <div class="" style="height: 100%">
          <div class="overflowX">
            <el-row :gutter="10" class="">
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="小区编号" prop="community_code">
                  <el-select
                    v-model="formData.community_code"
                    placeholder="请输入"
                    clearable
                    size="small"
                    :style="{ width: '100%' }"
                    @change="getchangemaintain"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="设备名称" prop="device_code">
                  <el-select
                    v-model="formData.device_code"
                    placeholder="请输入"
                    clearable
                    size="small"
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="item in deviceList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="维修单位名称" prop="unit">
                  <el-input
                    v-model="formData.unit"
                    size="small"
                    placeholder="请输入"
                    clearable
                    class="input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="维修人名称" prop="contacts">
                  <el-input
                    v-model="formData.contacts"
                    size="small"
                    placeholder="请输入"
                    clearable
                    class="input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="维修人联系方式" prop="contacts_tel">
                  <el-input
                    v-model="formData.contacts_tel"
                    size="small"
                    placeholder="请输入"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item
                  label="最后一次维修时间"
                  prop="last_maintain_time"
                >
                  <el-date-picker
                    v-model="formData.last_maintain_time"
                    type="date"
                    placeholder="选择日期"
                    size="small"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="下次维护时间" prop="next_maintain_time">
                  <el-date-picker
                    v-model="formData.next_maintain_time"
                    type="date"
                    placeholder="选择日期"
                    size="small"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-right: 10px">
                <el-form-item label="备注" prop="remark">
                  <el-input
                    v-model="formData.remark"
                    type="textarea"
                    :rows="4"
                    size="small"
                    placeholder="请输入内容"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24" style="padding-right: 10px">
                <el-form-item class="img" label="设备图片">
                  <ImageUpload ref="Img" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-row type="flex" justify="end" class="btn">
          <el-button size="small" @click="dialogBeforeClose">取消</el-button>
          <el-button
            type="primary"
            size="small"
            @click="addmaintainlistFn"
          >确定</el-button>
        </el-row>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { getCommunityApi, addmaintainlistApi, getshowmaintainlistApi, editmaintainlistApi, communityCode } from '@/api/device/maintain'
export default {
  components: { },
  props: {
    drawer: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      options: [],
      deviceList: [],
      formData: {
        photo: '',
        community_code: '',
        contacts: '',
        contacts_tel: '',
        device_code: '',
        last_maintain_time: null,
        next_maintain_time: null,
        remark: '',
        unit: '',
        name: ''
      },
      rules: {
        community_code: [
          {
            required: true,
            message: '请选择小区编号',
            trigger: 'blur'
          }
        ],
        device_code: [
          {
            required: true,
            message: '请输入设备名称',
            trigger: 'blur'
          }
        ],
        unit: [
          {
            required: true,
            message: '请输入维修单位名称',
            trigger: 'blur'
          }
        ],
        contacts: [
          {
            required: true,
            message: '请输入维修人名称',
            trigger: 'blur'
          }
        ],
        contacts_tel: [
          {
            required: true,
            message: '请输入维修人联系方式',
            trigger: 'blur'
          }
        ],
        last_maintain_time: [
          {
            required: true,
            message: '请选择最后一次维修时间',
            trigger: 'blur'
          }
        ],
        next_maintain_time: [
          {
            required: true,
            message: '请输入下次维护时间',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    showTitle() {
      return this.formData.id ? '修改维修记录' : '新增维修记录'
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 联动
    async getchangemaintain() {
      const res = await communityCode({
        community_code: this.formData.community_code
      })
      this.formData.device_code = ''
      this.deviceList = res.data
      console.log(this.deviceList)
    },
    // 回显
    async getmaintainlist1(id) {
      this.$emit('update:drawer', true)
      const { data } = await getshowmaintainlistApi(id)
      const res = await communityCode({ community_code: this.formData.community_code })
      this.deviceList = res.data
      this.$refs.Img.fileList = [
        {
          url: 'http://124.223.14.236:8881' + data.photo, // 显示图片
          realtiveUrl: data.photo // 提交时图片地址
        }
      ]
      // console.log(data)
      this.formData = data
      console.log(this.deviceList)
    },
    /**
     * 转换时间戳
     */

    changeTime(time) {
      return +new Date(time)
    },
    /**
     * 新增
     */
    addmaintainlistFn() {
      this.$refs.form.validate(async flag => {
        if (!flag) return
        if (this.formData.id) {
          this.formData.photo = this.$refs.Img.fileList[0].realtiveUrl
          this.formData.last_maintain_time = this.changeTime(this.formData.last_maintain_time)
          this.formData.next_maintain_time = this.changeTime(this.formData.next_maintain_time)
          await editmaintainlistApi(this.formData)
          this.$message.success('修改成功')
        } else {
          this.formData.last_maintain_time = this.changeTime(this.formData.last_maintain_time)
          this.formData.next_maintain_time = this.changeTime(this.formData.next_maintain_time)
          this.formData.photo = this.$refs.Img.fileList[0].realtiveUrl
          await addmaintainlistApi(this.formData)
          this.$message.success('添加成功')
        }
        // this.formData.last_maintain_time = this.changeTime(this.formData.last_maintain_time)
        // this.formData.next_maintain_time = this.changeTime(this.formData.next_maintain_time)

        // 关闭弹框
        this.dialogBeforeClose()
        // 重新渲染
        this.$parent.getmaintainlist()
      })
    },
    /**
     * 获取小区
     */
    async initData() {
      const res = await getCommunityApi()
      this.options = res.data
      // this.deviceList
      // console.log(this.options)
    },
    // 清除数据

    dialogBeforeClose() {
      this.$emit('update:drawer', false)
      this.$refs.form.resetFields()
      this.$refs.Img.fileList = []
      this.formData = {}
      this.deviceList = []
    }

  }
}
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  align-items: center;
  h3 {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.88);
    padding-right: 10px;
  }
}
::v-deep.drawer {
  .el-drawer__header {
    padding-bottom: 10px;
    margin: 0;
    font-size: 25px;
    border-bottom: 1px solid #f0f0f0;
  }
  // .el-drawer__title {
  //   padding-top: 58px;
  // }
  .el-drawer__body {
    flex: 1 1;
    min-width: 0;
    min-height: 0;
    /* overflow: auto; */
  }
}
.container {
  padding: 0 20px;
  height: 95%;
  .el-form {
    position: relative;
    height: 100%;
    padding-bottom: 80px;
    .overflowX {
      height: 100%;
      overflow-x: hidden;
      // overflow: scroll;
    }
  }
}
.btn {
  border-top: 1px solid #f0f0f0;
  // padding: 20px 10px;
}
.el-form-item {
  margin-bottom: 0px;
}
::v-deep .el-input {
  .el-input__inner {
    text-align: left;
  }
  .el-upload--picture-card {
    width: 100px;
  }
}
</style>
